<template>
  <div class="trolley">
    <!-- 没有添加商品提示页面 -->
    <div v-if="trolleyList.length==0">
        <van-nav-bar
        left-text="返回"
        left-arrow
        title="购物车"
        @click-left="$router.back()"
        />
        <van-empty description="空空如也！" />
    </div>
    <!-- 导航栏 -->
    <div v-else>
    <van-nav-bar
      title="购物车"
      left-text="返回"
      :right-text="show == true ? '编辑' : '完成'"
      @click-left="books"
      @click-right="edit"
      fixed
      placeholder
    >
      <template #left>
        <van-icon
          name="https://m.sparke.cn/_nuxt/img/back.eb96d29.png"
          size="22"
        />
      </template>
    </van-nav-bar>
    <!-- 购物车主体内容 -->
    <van-swipe-cell 
          v-for="(item, index) of trolleyList" :key="index"
          class="trolleyList">
      <van-checkbox
        checked-color="#fc5e3c"
        label-disabled
        v-model="item.is_checked"
        @change="singleChecked(item.is_checked, index)"
      >
        <van-card
          :num="item.count"
          :price="item.price.toString()"
          :title="item.title"
          :thumb="item.pic"
        />
        <van-stepper v-model="item.count" max="99" button-size="21" />
      </van-checkbox>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="del(index)"
        />
      </template>
    </van-swipe-cell>
    <!-- 底部卡位 -->
    <div class="height"></div>
    <!-- 商品结算 -->
    <van-submit-bar
      :price="this.show == true ? total * 100 : null"
      :button-text="this.show == true ? '结算' : '删除'"
      button-color="#fc5e3c"
      @submit="onSubmit()"
    >
      <van-checkbox
        v-model="checkAll"
        @click="choiceAll"
        checked-color="#fc5e3c"
        >全选</van-checkbox
      >
    </van-submit-bar>
   </div>
  </div>
</template>
<style scoped>
/* 导航栏 */
.van-hairline--bottom::after {
  border: none;
}
.trolley >>> .van-nav-bar__title {
  font-size: 1.125rem;
  font-weight: 700;
}
.trolley >>> .van-nav-bar__text {
  font-size: 1.0625rem;
  color: #222831;
}
/* 购物车主题内容 */
.trolleyList .van-checkbox {
  padding: 0.625rem 0.9375rem;
  margin-top: 4.075rem;
}
.trolley >>> .van-checkbox__label {
  width: 100%;
}
.van-card__title {
  font-size: 0.875rem;
  font-weight: 700;
}
.van-card__price {
  font-size: 0.9375rem;
  font-weight: 400;
}
.trolley >>> .van-stepper__input {
  margin: 0;
  border: 0.0625rem solid #e2e4e6;
  background-color: #fafafa;
}
.trolley >>> .van-stepper__minus {
  border-top: 0.0625rem solid #e2e4e6;
  border-left: 0.0625rem solid #e2e4e6;
  border-bottom: 0.0625rem solid #e2e4e6;
  background-color: #fafafa;
}
.trolley >>> .van-stepper__plus {
  border-top: 0.0625rem solid #e2e4e6;
  border-right: 0.0625rem solid #e2e4e6;
  border-bottom: 0.0625rem solid #e2e4e6;
  background-color: #fafafa;
}
.van-stepper {
  background-color: #fafafa;
  text-align: right;
}
/* 滑动单元格样式 */
.delete-button {
  height: 7.8125rem;
}
.trolley >>> .van-swipe-cell__right {
  padding-top: 0.625rem;
}
/* 底部卡位 */
.height {
  width: 100%;
  height: 3.125rem;
}
/* 商品结算 */
.van-submit-bar__text {
  font-size: 1.125rem;
  font-weight: 700;
}
.van-submit-bar__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: #222831;
}
.van-button__content {
  font-size: 0.9375rem;
  font-weight: 700;
}
.van-submit-bar {
  position: 0;
  box-shadow: 0 0.0625rem 1.25rem #e2e4e6;
}
.van-submit-bar__bar {
  padding: 0 0.3125rem;
  justify-content: space-between;
}
</style>
<script>
export default {
  data() {
    return {
      trolleyList: [],
      checkAll: false,
      show: true //切换编辑删除的状态
    };
  },
  methods: {
    // 返回按钮
    books() {
      this.$router.go(-1);
    },
    // 编辑按钮
    edit() {
      if (this.show == true) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    // 只显示当前商品的小计
    singleChecked(checked, index) {
      if (!checked) {
        this.trolleyList[index].is_checked = false;
      } else {
        this.trolleyList[index].is_checked = true;
      }
      if (this.checked == this.trolleyList.length) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
    },
    // 全选切换
    choiceAll() {
      if (this.checkAll) {
        for (let val of this.trolleyList) {
          val["is_checked"] = true;
        }
      } else {
        for (let val of this.trolleyList) {
          val["is_checked"] = false;
        }
      }
    },
    // 滑动删除
    del(i) {
      this.trolleyList.splice(i, 1);
      console.log(this.trolleyList);
    },
    // 结算或删除
    onSubmit() {
      if (this.show == true) {
        this.$router.push(`/nonactivated`);
      } else {
        var Newarr = this.trolleyList.filter(item => {
          return (item.is_checked = false);
        });
        this.trolleyList = Newarr;
        this.$store.commit("delete", Newarr);
        // console.log(Newarr)
      }
    }
  },
  computed: {
    // 计算商品总价
    total() {
      var total = 0;
      for (var p of this.trolleyList) {
        if (p.is_checked) {
          total += p.price * p.count;
        }
      }
      return total;
    },
    // 计算选中的商品数量
    checked() {
      let sum = 0;
      for (let n of this.trolleyList) {
        if (n.is_checked) {
          sum++;
        }
      }
      return sum;
    }
  },
  mounted() {
    this.trolleyList = this.$store.state.trolleyList;
    // console.log(trolleyList)
  }
};
</script>